// =================================
// 核心变量定义
// =================================
$header-height: 180rpx;
$header-compact-height: 120rpx;
$border-radius: 32rpx;
$transition: all 0.3s ease;

// 玻璃效果颜色
$glass-base: rgba(255, 255, 255, 0.12);
$glass-light: rgba(255, 255, 255, 0.18);
$glass-border: rgba(255, 255, 255, 0.25);

// 阴影
$shadow: 0 6rpx 24rpx -6rpx rgba(0, 0, 0, 0.25);
$shadow-inset: inset 0 1rpx 0 rgba(255, 255, 255, 0.15);

// =================================
// 玻璃按钮 Mixin
// =================================
@mixin glass-button($size: 72rpx) {
  width: $size;
  height: $size;
  background: linear-gradient(145deg, $glass-light, $glass-base);
  border: 1rpx solid $glass-border;
  border-radius: 50%;
  backdrop-filter: blur(16rpx);
  box-shadow: $shadow, $shadow-inset;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: $transition;
  &:active {
    transform: scale(0.96);
  }
}

// =================================
// 主体结构
// =================================
.c-header {
  position: relative;
  z-index: 100;
  min-height: $header-height;
  backdrop-filter: blur(24rpx);
  
  // 紧凑模式
    &.compact-mode {
      min-height: $header-compact-height;
  }
}

// =================================
// 背景层
// =================================
.background-layers {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.88) 0%,
      rgba(99, 102, 241, 0.82) 30%,
      rgba(139, 69, 19, 0.78) 70%,
      rgba(17, 24, 39, 0.88) 100%);
  background-size: 220% 220%;
    animation: gradientFloat 18s ease-in-out infinite;
    border-radius: 0 0 $border-radius $border-radius;
}

.pattern-overlay {
  position: absolute;
  inset: 0;
    background: radial-gradient(circle at 25% 25%, $glass-light 0%, transparent 55%),
      radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.06) 0%, transparent 55%);
    opacity: 0.7;
}

.glass-overlay {
  position: absolute;
  inset: 0;
    background: linear-gradient(135deg, $glass-base 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(2rpx);
}

// =================================
// 内容区域
// =================================
.header-content {
  position: relative;
  z-index: 2;
  padding: 24rpx 36rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .c-header.compact-mode & {
      padding: 16rpx 32rpx 20rpx;
    }
}

// =================================
// 返回按钮区域
// =================================
.back-section {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 20rpx;

  .back-btn .btn-glass-bg {
      @include glass-button(64rpx);
    .c-header.compact-mode & {
        @include glass-button(56rpx);
    }
  }

  .back-title {
    font-size: 32rpx;
      font-weight: 600;
    color: white;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .c-header.compact-mode & {
        font-size: 28rpx;
      }
  }
}

// =================================
// 用户区域
// =================================
.user-section {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 24rpx;
  
    .c-header.compact-mode & {
      gap: 20rpx;
    }
  &:active {
    opacity: 0.9;
    transform: scale(0.98);
  }
}

.avatar-container {
  position: relative;
  .avatar-glass-ring {
      position: relative;
    padding: 4rpx;
      background: linear-gradient(145deg, $glass-light, $glass-base);
      border-radius: 50%;
      backdrop-filter: blur(12rpx);
    box-shadow: $shadow, $shadow-inset;
    .c-header.compact-mode & {
        padding: 3rpx;
      }
    }
    
    .user-avatar {
    width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    .c-header.compact-mode & {
        width: 68rpx;
        height: 68rpx;
      }
    }
    
    .online-indicator {
      position: absolute;
    bottom: 4rpx;
      right: 4rpx;
    width: 24rpx;
      height: 24rpx;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.22));
      border-radius: 50%;
      backdrop-filter: blur(8rpx);
      display: flex;
      align-items: center;
      justify-content: center;
    box-shadow: $shadow;
    .c-header.compact-mode & {
        width: 20rpx;
        height: 20rpx;
        bottom: 2rpx;
        right: 2rpx;
      }
    
      .status-dot {
      width: 12rpx;
        height: 12rpx;
      background: #00e676;
        border-radius: 50%;
      box-shadow: 0 0 8rpx rgba(0, 230, 118, 0.6);
        animation: pulse 2.5s ease-in-out infinite;
      
        .c-header.compact-mode & {
          width: 10rpx;
          height: 10rpx;
        }
      }
      }
}

.user-info {
  flex: 1;
  
  .greeting {
    display: block;
    font-size: 26rpx;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 6rpx;
    font-weight: 400;
    text-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.2);
    .c-header.compact-mode & {
        font-size: 22rpx;
        margin-bottom: 4rpx;
      }
  }

  .username {
    display: block;
    font-size: 36rpx;
      font-weight: 700;
    color: white;
    text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.4);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .c-header.compact-mode & {
        font-size: 30rpx;
      }
  }
}

// =================================
// 操作区域
// =================================
.action-section {
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  .c-header.compact-mode & {
      gap: 16rpx;
  }
}

.status-pill .status-pill-bg {
  display: flex;
  align-items: center;
  gap: 12rpx;
  background: linear-gradient(135deg, $glass-light, $glass-base);
  border: 1rpx solid $glass-border;
  border-radius: 48rpx;
    padding: 16rpx 24rpx;
  backdrop-filter: blur(20rpx);
  box-shadow: $shadow, $shadow-inset;
  .c-header.compact-mode & {
      padding: 12rpx 20rpx;
      border-radius: 40rpx;
      gap: 10rpx;
    }
    &:active {
      transform: scale(0.96);
  }
}

.status-text {
  font-size: 22rpx;
  color: white;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
  
  .c-header.compact-mode & {
      font-size: 20rpx;
  }
}

.action-button {
  .button-glass-bg {
    @include glass-button(72rpx);
    .c-header.compact-mode & {
        @include glass-button(60rpx);
      }
  }
}

// =================================
// 动画定义
// =================================
@keyframes gradientFloat {
  0%,
    100% {
      background-position: 0% 50%;
    }
  
    50% {
      background-position: 100% 50%;
    }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

// =================================
// 响应式设计
// =================================
@media (max-width: 750rpx) {
  .c-header {
    min-height: 160rpx;
    &.compact-mode {
        min-height: 100rpx;
    }
  }

    .header-content {
      padding: 20rpx 24rpx 28rpx;
    .c-header.compact-mode & {
        padding: 12rpx 24rpx 16rpx;
      }
  }

  .user-avatar {
    width: 64rpx;
    height: 64rpx;
    
    .c-header.compact-mode & {
        width: 56rpx;
        height: 56rpx;
      }
  }

  .user-info {
    .greeting {
      font-size: 22rpx;
      
      .c-header.compact-mode & {
          font-size: 20rpx;
        }
      }

        .username {
          font-size: 28rpx;
      
      .c-header.compact-mode & {
          font-size: 26rpx;
        }
      }
    }

    .back-title {
      font-size: 28rpx;
    .c-header.compact-mode & {
        font-size: 24rpx;
    }
  }
}